<template>
    <!-- 展示全部订单 -->
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>挂号订单</span>
            </div>
        </template>
        <!-- 提供用户选择的拉菜单 -->
        <el-form inline="true">
            <el-form-item label="就诊人">
                <el-select placeholder="请选择就诊人" clearable style="width: 200px;" v-model="patientId"
                    @change="changeUser">
                    <el-option label="请选择全部就诊人" value=""></el-option>
                    <el-option v-for="item in allUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select placeholder="请选择订单状态" clearable style="width: 200px;" v-model="orderStatus"
                    @change="changeOrderState">
                    <el-option label="全部订单" value=""></el-option>
                    <el-option v-for="(item, index) in allOrderState" :key="index" :label="item.comment"
                        :value="item.status"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <!-- 展示订单的数据 -->
        <el-table border style="margin: 10px 0;" :data="allOrderArr">
            <el-table-column label="就诊时间" prop="reserveDate" />
            <el-table-column label="医院" prop="hosname" />
            <el-table-column label="科室" prop="depname" />
            <el-table-column label="医生" prop="title" />
            <el-table-column label="服务费" prop="amount" />
            <el-table-column label="就诊人" prop="patientName" />
            <el-table-column label="订单状态" prop="param.orderStatusString" />
            <el-table-column label="操作" prop="hosname">
                <template #="{ row }">
                    <el-button type="text" @click="goDetail(row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :background="true" layout=" prev, pager, next, jumper,->,total, sizes" :total="total"
            @current-change="handler" @size-change="handlerr" />
    </el-card>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import { reqUserOrderInfo, reqAllUser, reqOrderStatus } from '@/api/user'
import { useRouter } from 'vue-router';
let $router = useRouter();
let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
//收集就诊人的id
let patientId = ref<string>('')
//订单的状态
let orderStatus = ref<string>('')
//存储全部的订单
let allOrderArr = ref<any>([])
//存储订单的总个数
let total = ref<number>(0)
//存储全部就诊人的信息
let allUser = ref<any>([])
//存储全部订单状态
let allOrderState = ref<any>([])
onMounted(() => {
    //获取订单的方法
    getOrderInfo();
    //获取全部就诊人信息以及订单状态
    getData();
})
//获取订单的方法
const getOrderInfo = async () => {
    let result = await reqUserOrderInfo(pageNo.value, pageSize.value, patientId.value, orderStatus.value)
    if (result.data.code === 200) {
        allOrderArr.value = result.data.data.records
        total.value = result.data.data.total
    }
}
//获取全部就诊人信息以及订单状态
const getData = async () => {
    let result = await reqAllUser();
    allUser.value = result.data.data

    let result2 = await reqOrderStatus();
    allOrderState.value = result2.data.data
}
//详情按钮的回调
const goDetail = (row: any) => {
    $router.push({
        path: '/user/order',
        query: {
            orderId: row.id
        }
    })
}
//分页器当前页码的事件回调
const handler = (pager: number) => {
    pageNo.value = pager
    getOrderInfo();
}
//下拉菜单事件的回调
const handlerr = (pageSizes: number) => {
    pageSize.value = pageSizes;
    getOrderInfo();
}
//就诊人下拉菜单回调
const changeUser = () => {
    getOrderInfo();
}
//订单状态下拉菜单回调
const changeOrderState=()=>{
    getOrderInfo();
}
</script>

<style></style>